<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div></div>
    <script>


        /*
            轮播图的核心
                通过运动函数 让 ul标签 定位改变 是 运动效果

            问题:
                1,  原始图片n张 实际轮播图片 n+2 张
                    原始第一张  克隆 写入 最后
                    原始最后一张克隆 写入 起始
                   
                    当运动切换至 最后一张图片时,瞬间定位至第二张图片
                    当运动切换至 第一张图片时,瞬间定位至倒数第二张图片

                    轮播图要轮序播放,切换瞬间完成,用户看不到区别

                    本质上是为了轮播图可以轮序播放

                2,  关键变量 index  
                    控制 ul的定位 通过 设定 定位距离是 多个少li的宽度 来实现
                    不同的ul定位 效果是 显示 不同的li 显示不同的轮播图片

                    定位的数值 也就是 li的索引下标*li的宽度

                    index变量中 存储的数值 就是 表示 li的索引下标

                    通过控制 index 中存储的数值 控制 ul定位的距离 控制显示的li 也就是显示的轮播图片

                3,  运动结束执行的回调函数

                    轮播图,图片切换,也就是ul定位的改变,是通过运动函数,运动完成的

                    我们并不能准确的知道,运动结束的时间,因此通过运动函数中定时器都被清除,表示运动结束

                    运动结束时,执行回调函数,执行相应的程序

            基本步骤:
                1, 轮播图的HTML和CSS
                
                2, 通过数据数据,渲染生成轮播图,标签内容
                    (1), 应该是从后端数据库获取数组数据
                        目前是自定义一个数组,模拟后端数据

                    (2), 通过循环遍历数组,生成 ul>li 和 ol>li 标签字符串
                    生成字符串之后,写入到ul,ol标签中
                        ul>li中 嵌套 img标签 
                            img标签 src属性 也就是显示图片的路径是 数组中存储的数据
                        ol>li 就是空标签 就是焦点按钮
                            每一个li标签要自定义属性属性值 是 在数组中的索引下标
                            第一个li标签要添加 class,active css样式

                    (3), 克隆复制 ul>li 中 原始第一个和最后一个li标签对象
                         克隆的第一个li标签,写入ul末位
                         克隆的最后一个li标签,写入ul起始

                    (4), 根据li的个数 设定 ul的宽度 
                            宽度是 (数组单元个数+2) * li宽度/div宽度

                    (5), 定位ul,左移一个 li的宽度
                        

                3, 轮播图的自动轮序播放
                    通过定时器,调用move()运动函数
                    move()运动函数 实现的是一次运动切换轮播图片
                    定时器实现 每间隔一段时间,做一次轮播图的切换

                    定义一个定时器
                        index++
                        调用 move() 运动函数
                        参数1:运动的标签对象
                            ul标签
                        参数2:运动的属性和属性值
                            属性: left 
                            属性值: -index * li/div的宽度
                        参数3:运动结束的回调函数


                4, 定义 轮播图 运动切换结束 执行的回调函数
                    (1), 判断 index 的数值
                        如果 index 是 最后一个li的索引下标
                            index 赋值 1
                        如果 index 是 0 
                            index 赋值 倒数第二个li索引下标

                    (2), 根据 新的index 定位 ul标签
                        这个定位是要瞬间完成的切换效果,不使用move()运动函数
                        直接给 ul.style.left 赋值

                    (3), 根据index也就是当前显示li的索引下标
                         设定 ol>li 也就是 焦点标签的 css样式

                         ul>li标签 和 ol>li标签 索引下标关系
                            ul>li标签索引下标 - 1  是 ol>li标签索引下标

                    (4), 给 bool 变量赋值 true
                        解决点击过快变量 赋值 true 可以再次点击,实现切换图片


                5, 鼠标的移入移出事件
                    给div标签,添加移入移出事件
                    使用 mouseenter 和 mouseleave 防止 子级标签也出发事件
                    移入时: 清除定时器
                    移出时: 再次调用 自动轮播函数

                6, 点击事件,左右切换和焦点切换
                    给父级div标签,添加点击事件,通过事件委托的形式,判断点击标签对象
                        如果点击的是左切换按钮
                            判断bool变量储存的数值
                            如果是true  给 bool赋值false 可以执行之后的程序
                            如果是false 执行 return 终止之后程序的执行

                            index--
                            调用move运动函数

                        如果点击的是右切换按钮
                            判断bool变量储存的数值
                            如果是true  给 bool赋值false 可以执行之后的程序
                            如果是false 执行 return 终止之后程序的执行

                            index++
                            调用move运动函数

                        如果点击的是焦点切换按钮
                            判断bool变量储存的数值
                            如果是true  给 bool赋值false 可以执行之后的程序
                            如果是false 执行 return 终止之后程序的执行

                            index 是 点击焦点索引下标+1
                            调用move运动函数

                7, 浏览器隐藏事件
                    造成问题的原因:
                        浏览器隐藏,css样式等程序不会执行
                        定时器会继续执行
                        当显示时,会有多个定时器在同时执行
                        造成对ul标签,定位操作的混乱

                        浏览器隐藏 清除定时器
                        浏览器显示 再次调用自动轮播函数


                8, 解决点击过快问题
                    本质: 上一个move运动函数还没有执行完毕
                          下一个move运动函数又开始执行
                          多个定时器 同时操作 ul标签的定位显示
                          就会造成显示冲突

                    解决方案:
                        定义一个变量 赋值一个默认值
                        触发move运动函数之前,先执行判断
                        如果是默认值,变量赋值其他数值
                        如果是其他数值,执行 return 
                        当move运动函数执行结束,变量赋值默认值,可以再次调用运动函数
        
        */

    </script>
</body>
</html>